<template>
	<div class="communityPage">
		<NewsHeader 
			:isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder" 
			:aimUrl = 'dataArr.aimUrl'
			:rightUrl='dataArr.rightUrl'
		/>
		<div class="communityContent">
			<div class="communityTitle">
				<ul>
					<li><span>全部</span></li>
					<li><span class="active">好物测评</span></li>
					<li><span>生活技能</span></li>
					<li><span>闲话家常</span></li>
				</ul>
			</div>
			<div class="communityText">
				<div class="communityTextCont">
					<p class="maiKeFeng">
						<img src="../../assets/images/shouye/icon_maikefeng@2x.png" alt="">
					</p>
					<p class="artice">
						<span>关于冰箱，你有什么要吐槽的？你对你家的冰箱有什么不满的：不够好看、容量太小或太大、制冷效果不好、总有异味，还是......？快来说...</span>
					</p>
					<p class="pingLunTu">
						<img src="../../assets/images/shouye/img_touxaing@2x.png" alt="">
					</p>
					<p class="pingLun">
						<span>1401人参加讨论</span>
					</p>
				</div>
				<div class="communityTextCont">
					<p class="maiKeFeng">
						<img src="../../assets/images/shouye/icon_maikefeng@2x.png" alt="">
					</p>
					<p class="artice">
						<span>关于冰箱，你有什么要吐槽的？你对你家的冰箱有什么不满的：不够好看、容量太小或太大、制冷效果不好、总有异味，还是......？快来说...</span>
					</p>
					<p class="pingLunTu">
						<img src="../../assets/images/shouye/img_touxaing@2x.png" alt="">
					</p>
					<p class="pingLun">
						<span>1401人参加讨论</span>
					</p>
				</div>
				<div class="communityTextCont">
					<p class="maiKeFeng">
						<img src="../../assets/images/shouye/icon_maikefeng@2x.png" alt="">
					</p>
					<p class="artice">
						<span>关于冰箱，你有什么要吐槽的？你对你家的冰箱有什么不满的：不够好看、容量太小或太大、制冷效果不好、总有异味，还是......？快来说...</span>
					</p>
					<p class="pingLunTu">
						<img src="../../assets/images/shouye/img_touxaing@2x.png" alt="">
					</p>
					<p class="pingLun">
						<span>1401人参加讨论</span>
					</p>
				</div>
			</div>
			<div class="faBu">
				<img src="../../assets/images/shouye/icon_fabu@2x.png" alt="">
			</div>
		</div>
	</div>
</template>
<script>
import NewsHeader from '../../components/shopheader'	
export default{
	name:'communityPage',
	components:{
		NewsHeader
	},
	data(){
		return{
				dataArr:{
					isInput:true,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:"icon-xiaoxi"
						}
					],
					placeholder:"搜索您想要的区域",
					aimUrl:'/layout/home',
					rightUrl:'/wonews'
			}
		}
	}
}
</script>
<style scoped lang="less">
.communityPage{
	width: 100%;
	height: 100%;
	// overflow: hidden;
	.communityContent{
		width: 100%;
		height: 100%;
		margin-top: 88 / 100rem;
		// padding: 0 40 / 100rem;
		box-sizing: border-box;
		// overflow: hidden;
		.communityTitle{
			overflow: hidden;
			width: 100%;
			height: 96 / 100rem;
			box-shadow: 0px 10 / 100rem 14 / 100rem rgba(0, 0, 0, 0.2); 
			ul{
				width: 100%;
				height: 100%;
				padding: 0 40 / 100rem;
				box-sizing: border-box;
				border-top: 1px solid #f3f3f3;
				li{
					float: left;
					margin-top: 30 / 100rem;
					margin-bottom: 30 / 100rem;
					span{
						font-size: 32 / 100rem;
						font-weight: 600;
						color: rgba(0, 0, 0, 0.8)
					}
					.active{
					color: #ff5555;
				}
				}
				li:nth-child(2){
					margin-left: 68 / 100rem;
					margin-right: 68 / 100rem;
				}
				li:nth-child(4){
					margin-left: 68 / 100rem;
				}
			}
		}
		.communityText{
			width: 100%;
			height: 100%;
			padding: 0 40 / 100rem;
			margin-top: 34 / 100rem;
			box-sizing: border-box;
			position: relative;
			.communityTextCont{
				width: 670 / 100rem;
				height: 421 / 100rem;
				border-radius: 8 / 100rem;
				margin-bottom: 64 / 100rem;
				box-shadow: 0 0 10 / 100rem 14 / 100rem rgba(0, 0, 0, 0.1);
				position: relative;
				.maiKeFeng{
					position: absolute;
					top: 78 / 100rem;
					left:317 / 100rem;
					img{
						width: 41 / 100rem;
						height: 60 / 100rem;
					}
				}
				.artice{
					position: absolute;
					top:195 / 100rem;
					left: 0;
					text-align: center;
					// text-align:justify;
					span{
						font-size: 26 /100rem;
						color: rgba(0, 0, 0, 0.8)
					}
				}
				.pingLunTu{
					position: absolute;
					bottom:36 / 100rem;
					left:164 / 100rem;
					text-align: center;
					vertical-align: middle;
					img{
						width: 133 / 100rem;
						height: 46 / 100rem;
					}
				}
				.pingLun{
					position: absolute;
					left:306 / 100rem;
					bottom: 48 / 100rem;
				}
			}
		}
		.faBu{
				position:fixed;
				right: 0;
				bottom: 0;
				img{
					width: 68 / 100rem;
					height: 68 / 100rem;
					position: absolute;
					right: 34 / 100rem;
					bottom: 113 / 100rem;
				}
			}
	}
}	
</style>